<template>
	<div class="tool-title-box">
		<h3>图文列表</h3>
		<div class="operation-box">
			<div class="item-box">
				<div class="title">标题内容</div>
				<div class="modify-box w100">
					<el-input v-model="activeComponent.data.title" placeholder="请输入标题内容" clearable></el-input>
				</div>
			</div>
			<div class="item-box">
				<div class="title">显示位置</div>
				<div class="info">居{{activeComponent.data.align == 'right' ? '右' : activeComponent.data.align == 'center' ? '中' : '左'}}</div>
				<div class="modify-box">
					<span class="iconfont" :class="{active: activeComponent.data.textAlign === 'left'}" 
						@click="activeComponent.data.textAlign = 'left'">
						<i class="fa fa-align-left" aria-hidden="true"></i>
					</span>
					<span class="iconfont" :class="{active: activeComponent.data.textAlign === 'center'}"
						@click="activeComponent.data.textAlign = 'center'">
						<i class="fa fa-align-center" aria-hidden="true"></i>
					</span>
					<span class="iconfont" :class="{active: activeComponent.data.textAlign === 'right'}"
						@click="activeComponent.data.textAlign = 'right'">
						<i class="fa fa-align-right" aria-hidden="true"></i>
					</span>
				</div>
			</div>
			<div class="item-box">
				<div class="title">标题大小</div>
				<div class="info">{{activeComponent.data.fontSize}}px</div>
				<div class="modify-box">
					<font-size-select v-model:fontSize='activeComponent.data.fontSize'></font-size-select>
				</div>
			</div>
			<div class="item-box">
				<div class="title">标题粗细</div>
				<div class="info" v-text="activeComponent.data.fontWeight === 'bold' ? '加粗' : '常规'"></div>
				<div class="modify-box">
					<span class="iconfont"
						:class="{active: activeComponent.data.fontWeight === 'normal'}"
						@click="activeComponent.data.fontWeight = 'normal'">
						<i class="fa fa-font" aria-hidden="true"></i>
					</span>
					<span class="iconfont" :class="{active: activeComponent.data.fontWeight === 'bold'}"
						@click="activeComponent.data.fontWeight = 'bold'">
						<i class="fa fa-bold" aria-hidden="true"></i>
					</span>
				</div>
			</div>
			<div class="item-box">
				<div class="title">标题颜色</div>
				<div class="info">{{activeComponent.data.fontColor}}</div>
				<div class="modify-box">
					<div class="color-box">
						<span @click="activeComponent.data.fontColor = '#333333'">重置</span>
						<div class="block">
							<el-color-picker v-model="activeComponent.data.fontColor"></el-color-picker>
						</div>
					</div>
				</div>
			</div>
			<div class="item-box">
				<div class="title">排列方式</div>
				<div class="modify-box">
					<el-select v-model="activeComponent.data.listStyle" placeholder="请选排列方式" style="width: 100px;">
						<el-option v-for="item in styleList" :key="item.id" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</div>
			</div>
		</div>
		<div class="img-list-box">
			<draggable v-model="activeComponent.data.imgTextData">
				<template #item="{ element,index }" :key="index">
					<div class="list-item">
						<div class="list-item-box">
							<div class="img-title" @click="openImgText(element, index)">
								<div class="title-left">
									<i class="fa fa-picture-o color-primary mr10" aria-hidden="true"></i>
									<span class="color-primary">{{element.title}}</span>
								</div>
								<div class="title-right">
									<i class="fa fa-trash-o color-danger mr10" aria-hidden="true" @click.stop="delImgText(element, index)"></i>
									<i v-if="imgCurrent === index" class="fa fa-angle-down color-primary" aria-hidden="true"></i>
									<i v-else class="fa fa-angle-up color-primary" aria-hidden="true"></i>
								</div>
							</div>
							<div class="add-img-box" v-show="imgCurrent === index">
								<div class="operation-box">
									<tool-single-img v-model:imageUrl='element.imgUrl' tip='建议尺寸: 16 : 9等比例图片, 高度自适应'></tool-single-img>
									<div class="item-box mt10">
										<div class="title">显示图片</div>
										<div class="modify-box">
											<el-switch v-model="element.isShow" active-text="是" inactive-text="否"/>
										</div>
									</div>
									<div class="item-box">
										<div class="title">标题内容</div>
										<div class="modify-box w100">
											<el-input v-model="element.title" placeholder="请输入标题内容" clearable></el-input>
										</div>
									</div>
									<div class="item-box">
										<div class="title">显示位置</div>
										<div class="info">居{{element.titleOptions.textAlign == 'right' ? '右' : element.titleOptions.textAlign == 'center' ? '中' : '左'}}</div>
										<div class="modify-box">
											<span class="iconfont" :class="{active: element.titleOptions.textAlign === 'left'}"
												@click="element.titleOptions.textAlign = 'left'">
												<i class="fa fa-align-left" aria-hidden="true"></i>
											</span>
											<span class="iconfont" :class="{active: element.titleOptions.textAlign === 'center'}"
												@click="element.titleOptions.textAlign = 'center'">
												<i class="fa fa-align-center" aria-hidden="true"></i>
											</span>
											<span class="iconfont" :class="{active: element.titleOptions.textAlign === 'right'}"
												@click="element.titleOptions.textAlign = 'right'">
												<i class="fa fa-align-right" aria-hidden="true"></i>
											</span>
										</div>
									</div>
									<div class="item-box">
										<div class="title">标题大小</div>
										<div class="info">{{element.titleOptions.fontSize}}px</div>
										<div class="modify-box fontSize">
											<font-size-select v-model:fontSize='element.titleOptions.fontSize'></font-size-select>
										</div>
									</div>
									<div class="item-box">
										<div class="title">标题粗细</div>
										<div class="info" v-text="element.titleOptions.fontWeight === 'bold' ? '加粗' : '常规'"></div>
										<div class="modify-box fontSize">
											<span class="iconfont" :class="{active: element.titleOptions.fontWeight === 'normal'}"
												@click="element.titleOptions.fontWeight = 'normal'">
												<i class="fa fa-font" aria-hidden="true"></i>
											</span>
											<span class="iconfont" :class="{active: element.titleOptions.fontWeight === 'bold'}"
												@click="element.titleOptions.fontWeight = 'bold'">
												<i class="fa fa-bold" aria-hidden="true"></i>
											</span>
										</div>
									</div>
									<div class="item-box">
										<div class="title">标题颜色</div>
										<div class="info">{{element.titleOptions.fontColor}}</div>
										<div class="modify-box">
											<div class="color-box">
												<span @click="element.titleOptions.fontColor = '#333333'">重置</span>
												<div class="block">
													<el-color-picker v-model="element.titleOptions.fontColor"></el-color-picker>
												</div>
											</div>
										</div>
									</div>
									<div class="item-box">
										<div class="title">描述内容</div>
										<div class="modify-box w100">
											<el-input type="textarea" v-model="element.describe" :rows="2" placeholder="请输入内容" clearable></el-input>
										</div>
									</div>
									<div class="item-box">
										<div class="title">显示位置</div>
										<div class="info">居{{element.describeOptions.textAlign == 'right' ? '右' : element.describeOptions.textAlign == 'center' ? '中' : '左'}}</div>
										<div class="modify-box">
											<span class="iconfont" :class="{active: element.describeOptions.textAlign === 'left'}"
												@click="element.describeOptions.textAlign = 'left'">
												<i class="fa fa-align-left" aria-hidden="true"></i>
											</span>
											<span class="iconfont" :class="{active: element.describeOptions.textAlign === 'center'}"
												@click="element.describeOptions.textAlign = 'center'">
												<i class="fa fa-align-center" aria-hidden="true"></i>
											</span>
											<span class="iconfont" :class="{active: element.describeOptions.textAlign === 'right'}"
												@click="element.describeOptions.textAlign = 'right'">
												<i class="fa fa-align-right" aria-hidden="true"></i>
											</span>
										</div>
									</div>
									<div class="item-box">
										<div class="title">描述大小</div>
										<div class="info">{{element.describeOptions.fontSize}}px</div>
										<div class="modify-box fontSize">
											<font-size-select v-model:fontSize='element.describeOptions.fontSize'></font-size-select>
										</div>
									</div>
									<div class="item-box">
										<div class="title">描述粗细</div>
										<div class="info" v-text="element.describeOptions.fontWeight === 'bold' ? '加粗' : '常规'"></div>
										<div class="modify-box fontSize">
											<span class="iconfont" :class="{active: element.describeOptions.fontWeight === 'normal'}"
												@click="element.describeOptions.fontWeight = 'normal'">
												<i class="fa fa-font" aria-hidden="true"></i>
											</span>
											<span class="iconfont" :class="{active: element.describeOptions.fontWeight === 'bold'}"
												@click="element.describeOptions.fontWeight = 'bold'">
												<i class="fa fa-bold" aria-hidden="true"></i>
											</span>
										</div>
									</div>
									<div class="item-box">
										<div class="title">描述颜色</div>
										<div class="info">{{element.describeOptions.fontColor}}</div>
										<div class="modify-box">
											<div class="color-box">
												<span @click="element.describeOptions.fontColor = '#666666'">重置</span>
												<div class="block">
													<el-color-picker v-model="element.describeOptions.fontColor"></el-color-picker>
												</div>
											</div>
										</div>
									</div>
									<tool-select-link v-model:linkObj='element.linkObj' title="图片链接"></tool-select-link>
									<div class="item-box">
										<el-button type="danger" @click="delImgText(element, index)" class="w100 mt10">
											<i class="fa fa-trash-o" aria-hidden="true"></i><span>删除内容</span>
										</el-button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</template>
			</draggable>
		</div>
		<el-button type="primary" @click="addImgText" class="w100">
			<i class="fa fa-picture-o" aria-hidden="true"></i><span>添加内容</span>
		</el-button>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive, onMounted, computed } from 'vue';
	import { useStore } from '/@/store/index';
	import { ElMessageBox } from 'element-plus';
	import draggable from 'vuedraggable';
	
	import FontSizeSelect from '/@/views/decorator/components/toolBar/module/font-size-select.vue';
	import ToolSingleImg from '/@/views/decorator/components/toolBar/module/tool-single-img.vue';
	import ToolSelectLink from '/@/views/decorator/components/toolBar/module/tool-select-link.vue';
	export default {
		name: 'image-text-list-tool',
		components: {
			draggable,
			FontSizeSelect,
			ToolSelectLink,
			ToolSingleImg,
		},
		setup() {
			const store = useStore();
			const state = reactive({
				alignList: [{
						id: 1,
						label: '居左',
						value: 'left'
					},
					{
						id: 2,
						label: '居中',
						value: 'center'
					},
					{
						id: 3,
						label: '居右',
						value: 'right'
					}
				],
				imgCurrent: null,
				styleList: [
					{
						id: 1,
						label: '一行一列',
						value: '1-1'
					},
					{
						id: 2,
						label: '一行两列',
						value: '1-2'
					},
					{
						id: 3,
						label: '一行三列',
						value: '1-3'
					},
					{
						id: 4,
						label: '一上二下',
						value: '2-1-2'
					},
					{
						id: 5,
						label: '二上三下',
						value: '2-2-3'
					},
				]
			});
			
			state.terminal = computed(() => store.state.decorator.terminal);
			state.activeComponent = computed(() => store.state.decorator.activeComponent);

			const openImgText = (item, index) => {
				state.imgCurrent = state.imgCurrent === index ? null : index;
			}
			// 添加图文
			const addImgText = () => {
				let length = state.activeComponent.data.imgTextData.length;
				state.activeComponent.data.imgTextData.push({
					linkObj: {
						selsectValue: '',
						selectName: '',
						typeText: '',
						url: ''
					},
					isShow: true,
					title: '图' + (length + 1),
					describe: '图文描述',
					imgUrl: ''
				})
			}
			// 删除内容
			const delImgText = (item, index) => {
				ElMessageBox.confirm('确定删除吗？', '提示', {
					confirmButtonText: '删除',
					cancelButtonText: '取消',
					type: 'warning',
				}).then(() => {
					state.activeComponent.data.imgTextData.splice(index, 1)
				}).catch(() => {});
			}
			
			onMounted(() => {
				
			})
			
			return {
				openImgText,
				addImgText,
				delImgText,
				...toRefs(state)
			}
		},
	}
</script>

<style lang="scss" scoped>
@import './scss/index.scss';
</style>
